<script setup>
import {ref} from "vue";
import {home_cases} from "@/assets/js/home-case.ts";

defineProps({enter: Boolean})
const state = ref({
  currentHover: 0,
  cases: home_cases,
})
const emit = defineEmits(['onCaseShow'])

const showCaseDialog = (item) => {
  emit("onCaseShow", item.caseId)
}
</script>

<template>
  <view class="container">
    <view class="column content" v-if="enter">
      <view class="nine-grid">
        <view class="grid column" v-for="(item, i) in state.cases" :key="i" :style="{animationDelay:`${0.3*(i+1)}s`}"
              @mouseenter="state.currentHover = i;" @mouseleave="state.currentHover = -1" @click="showCaseDialog(item)">
          <img :src="item.img" width="100%" alt=""
               :class="{active: state.currentHover === i}">
          <view class="column text" :class="{active: state.currentHover === i}">
            <view class="font26">{{ item.title }}</view>
            <view class="font26" style="margin-top: 20px;">{{ item.subTitle }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  height: calc(100vw * (1772 / 1920));

  .content {
    .nine-grid {
      display: grid;
      grid-template-columns: repeat(3, 33.3%);

      .grid {
        overflow: hidden;
        cursor: pointer;
        opacity: 0;
        animation: bottomFadeIn 1s ease-in-out forwards;

        img {
          scale: 1;
          transition: all .3s ease 0.1s;

          &.active {
            transform: scale(1.2, 1.2);
            opacity: 0.3;
          }
        }

        .text {
          width: 100%;
          height: calc(100vw * (1772 / 1920) / 4);
          text-align: center;
          position: absolute;
          opacity: 0;
          justify-content: center;

          &.active {
            opacity: 1;
            animation-name: fadeIn;
            animation-duration: 1.5s;
          }
        }
      }
    }
  }
}
</style>